import React, { useState, useEffect } from 'react';
import { inject, observer } from 'mobx-react';
import MenuBar from '@/components/MenuBar/index';
import { List, Button } from 'antd-mobile';
import { history } from 'umi';
import './index.less';
const User = (props: any) => {
  const { userStore } = props;
  const handleClick = () => {
    history.push({
      pathname: '/user/edit',
      query: {
        id: 10,
      },
    });
  };
  const handleLogout = () => {
    userStore.logoutAsync();
  };
  useEffect(() => {
    userStore.getUserAsync({
      id: 10,
    });
  }, []);

  return (
    <div>
      <MenuBar pathname={'/user'} />
      <div className="user-page">
        {/**用户信息 */}
        <div className="info">
          <div className="set" onClick={handleClick}>
            设置
          </div>
          <div className="user">
            <img
              alt="user"
              src={userStore.avatar || require('../../assets/yay.jpg')}
            />
            <div className="tel">{userStore.phone}</div>
            <div className="sign">{userStore.sign}</div>
          </div>
        </div>
        {/**列表 */}
        <div className="lists">
          <List>
            <List.Item arrow="horizontal">用户协议</List.Item>
            <List.Item arrow="horizontal">常见问题</List.Item>
            <List.Item arrow="horizontal">联系客服</List.Item>
          </List>
        </div>
        <Button style={{ marginTop: '100px' }} onClick={handleLogout}>
          退出登录
        </Button>
      </div>
    </div>
  );
};

export default inject('userStore')(observer(User));
